<template>
    <div class="recent-budget">
        <div class="block-title">近期收支记录</div>
        <swiper class="swiper-container" :options="swiperOption" ref="mySwiper" v-if="recentBudget.length>1">
            <swiper-slide v-for="(item, index) in recentBudget" :key="index">
                <div class="swiper-slide" >
                    <span class="index">{{index + 1}}</span>
                    <span class="title">{{item.title}}</span>
                    <span class="count">{{item.count}}</span>
                    <span class="user">{{item.user}}</span>
                    <span class="date">{{item.date}}</span>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import homepageApi from '@/api/homepage.js'

export default {
    data(){
        return{
            recentBudget:[
                {id:15,title:'早餐',count:6,amountType:1,user:'kk',date:'7月28日'},
                {id:14,title:'午餐',count:16,amountType:1,user:'kk',date:'7月24日'},
                {id:13,title:'晚餐',count:12,amountType:1,user:'cc',date:'7月22日'},
                {id:12,title:'买衣服',count:500,amountType:1,user:'cc',date:'7月22日'},
                {id:11,title:'吃烧烤',count:50,amountType:1,user:'kk',date:'7月22日'},
                {id:10,title:'华莱士',count:30,amountType:1,user:'kk',date:'7月22日'},
                {id:9,title:'炸鸡',count:15,amountType:1,user:'cc',date:'7月21日'},
                {id:8,title:'卤料',count:12,amountType:1,user:'kk',date:'7月20日'},
                {id:7,title:'买猫粮',count:11,amountType:1,user:'kk',date:'7月18日'},
                {id:6,title:'基金赎回',count:1200,amountType:2,user:'cc',date:'7月18日'},
                {id:5,title:'早餐',count:15,amountType:1,user:'kk',date:'7月17日'},
                {id:4,title:'午餐',count:16,amountType:1,user:'kk',date:'7月17日'},
                {id:3,title:'股票赚',count:3000,amountType:2,user:'cc',date:'7月16日'},
                {id:2,title:'晚餐',count:13,amountType:1,user:'kk',date:'7月16日'},
                {id:1,title:'午餐',count:12,amountType:1,user:'kk',date:'7月15日'}
            ],
            recentSwiper:null,
            swiperOption: {
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                //循环
                loop: true,
                //自动播放
                autoplay: 2000,
                //滑动速度
                speed: 800,
                //滑动方向
                direction: "vertical",
                //小手掌抓取滑动
                grabCursor: true,
                slidesPerView : 5,
                observer:true,//修改swiper自己或子元素时，自动初始化swiper 
                observeParents:true,//修改swiper的父元素时，自动初始化swiper 
                roundLengths:true
            },
        }
    },
    components:{
        swiper,
        swiperSlide
    },
    computed: {
        swiper () {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.init()
        })
    },
    methods: {
        init(){
            homepageApi.getRencentBudget({}).then((res)=>{
                console.log(22,res)
            })
        }
    },
}
</script>
<style lang="less" scoped>
.recent-budget{
    width:100%;
    height: 16vw;
    min-height: 180px;
    .swiper-container{
        width:100%;
        height: calc(100% - 50px);
        .swiper-slide{
            width:100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &>span{
                text-align: center;
                &.index{
                    flex:0 0 10%
                }
                &.title{
                    flex:1 1 50%
                }
                &.count{
                    flex:0 0 15%;
                }
                &.user{
                    flex:0 0 10%;
                }
                &.date{
                    flex:0 0 15%;
                }
            }
        }
    }
}
</style>